<template>
  <div class="app-container">
    <div class="customContainer towTabel">
      <!-- 搜索头 -->
      <el-form :inline="true" :model="formInline" class="demo-form-inline" size="small">
        <dj-store-select :category="659" :needItem="true" :showDelete="false" :defaultStore="formInline.store_id" @change="selectStoreChanged" />
        <el-form-item>
          <el-date-picker style="width:120px" :picker-options="pickerOptions" v-model="pickerDate" value-format="yyyy-MM" type="month" format="yyyy-MM" placeholder="选择月">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <span style="color: #888;">一级类别：</span>
          <el-select v-model="formInline.one_type" @change="typeChange" style="width:120px">
              <el-option v-for="item in fir_list" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <span style="color: #888;">二级类别：</span>
          <el-select v-model="formInline.two_type" style="width:120px">
              <el-option v-for="item in sec_list" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <dj-button size="small" @search="searchClick" />
        </el-form-item>
      </el-form>
      <div class="top_total">
        <div>预估订货总金额：<span>{{total_money}}</span></div>
        <div>累计订货总金额：<span>{{all_total_money}}</span></div>
      </div>
      <!-- 表格 -->
      <el-table highlight-current-row :data="top_list" border size="small">
        <el-table-column align="center" prop="name" ></el-table-column>
        <el-table-column align="center" prop="a1" label="玩具类">
          <template slot-scope="scope">
            <span :class="{'danger':top_list[2].a1/1>top_list[1].a1/1}">{{scope.row.a1}}</span>  
          </template>            
        </el-table-column>
        <el-table-column align="center" prop="a2" label="生活日用类">
          <template slot-scope="scope">
            <span :class="{'danger':top_list[2].a2/1>top_list[1].a2/1}">{{scope.row.a2}}</span>  
          </template>
        </el-table-column>
        <el-table-column align="center" prop="a3" label="数码/家电类">
          <template slot-scope="scope">
            <span :class="{'danger':top_list[2].a3/1>top_list[1].a3/1}">{{scope.row.a3}}</span>  
          </template>
        </el-table-column>
        <el-table-column align="center" prop="a4" label="文具类">
          <template slot-scope="scope">
            <span :class="{'danger':top_list[2].a4/1>top_list[1].a4/1}">{{scope.row.a4}}</span>  
          </template>
        </el-table-column>
        <el-table-column align="center" prop="a5" label="副食品类">
          <template slot-scope="scope">
            <span :class="{'danger':top_list[2].a5/1>top_list[1].a5/1}">{{scope.row.a5}}</span>  
          </template>
        </el-table-column>
        <el-table-column align="center" prop="a5" label="美妆洗护">
          <template slot-scope="scope">
            <span :class="{'danger':top_list[2].a6/1>top_list[1].a6/1}">{{scope.row.a6}}</span>  
          </template>
        </el-table-column>
      </el-table>
      <el-table style="margin:10px 0" highlight-current-row :data="list" border size="small" v-loading.body="listLoading" :span-method="spanMethod">
        <el-table-column align="center" prop="name" label="二级分类"></el-table-column>
        <el-table-column align="center" prop="section" label="价格区间">
          <template slot-scope="scope">
            <span :class="{'danger':scope.row.all_money/1>scope.row.money/1}">{{scope.row.section}}</span>  
          </template>           
        </el-table-column>
        <el-table-column align="center" prop="money" label="预估订货金额">
          <template slot-scope="scope">
            <span :class="{'danger':scope.row.all_money/1>scope.row.money/1}">{{scope.row.money}}</span>  
          </template> 
        </el-table-column>
        <el-table-column align="center" prop="all_money" label="累计订货金额">
          <template slot-scope="scope">
            <span :class="{'danger':scope.row.all_money/1>scope.row.money/1}">{{scope.row.all_money}}</span>  
          </template> 
        </el-table-column>
        <el-table-column align="center" prop="ratio" label="预估金额占比">
          <template slot-scope="scope">
            <span :class="{'danger':scope.row.all_money/1>scope.row.money/1}">{{scope.row.ratio}}</span>  
          </template> 
        </el-table-column>
      </el-table>
      <el-table highlight-current-row :data="total_list" :show-header="false" border size="small">
        <el-table-column align="center" prop="name"></el-table-column>
        <el-table-column align="center" prop="section"></el-table-column>
        <el-table-column align="center" prop="money">
          <template slot-scope="scope">
            <span :class="{'danger':scope.row.all_money/1>scope.row.money/1}">{{scope.row.money}}</span>  
          </template>  
        </el-table-column>
        <el-table-column align="center" prop="all_money">
          <template slot-scope="scope">
            <span :class="{'danger':scope.row.all_money/1>scope.row.money/1}">{{scope.row.all_money}}</span>  
          </template>
        </el-table-column>
        <el-table-column align="center" prop="ratio">
          <template slot-scope="scope">
            <span :class="{'danger':scope.row.all_money/1>scope.row.money/1}">{{scope.row.ratio}}</span>  
          </template>          
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script>
import { DjStoreSelect } from '@/components/store';
import { pickerOptionsMonth } from '@/utils';
import { getGiftType } from "@/api/common/commonApi";
import { getTypeInfo,getAllInfo } from "@/api/operation/typeIndex";
export default {
  components: {
    'dj-store-select': DjStoreSelect
  },
  data() {
    return {
      listLoading: false,
      list: null, 
      total_money:"0.00", //预估订货总金额
      all_total_money:"0.00", //累计订货总金额
      top_list: [
        {name:"预估订货金额占比",a1:"0.00%",a2:"0.00%",a3:"0.00%",a4:"0.00%",a5:"0.00%",a6:"0.00%"},
        {name:"预估订货金额",a1:"0.00",a2:"0.00",a3:"0.00",a4:"0.00",a5:"0.00",a6:"0.00%"},
        {name:"累计订货金额",a1:"0.00",a2:"0.00",a3:"0.00",a4:"0.00",a5:"0.00",a6:"0.00%"},
      ], 
      total_list: [
        {name:"合计",section:"-",money:"",all_money:"",ratio:""}
      ], 
      fir_list: [],
      sec_list: [],
      formInline: {
        store_id: this.$store.getters.optionId,
        one_type: "",
        two_type: "",
        start_time: '',
      },
      pickerDate: new Date(Date.UTC(new Date().getFullYear(), new Date().getDate()<9?new Date().getMonth():new Date().getMonth()+1)).toISOString().slice(0, 7),
      pickerOptions:pickerOptionsMonth(1)
    };
  },
  beforeRouteEnter(to, from, next) {
    next(vm => {
      //console.log("gift_month_form",1111111)
      if (!vm.list) {
        vm.getFirType();
      }
    });
  },
  methods: {
    getFirType(){
      getGiftType({id:0}).then(res=>{
        this.fir_list=res;
        this.formInline.one_type=res[0].id;
        this.getSecType(res[0].id);
      })
    },
    getSecType(id){
      getGiftType({id}).then(res=>{
        if(res.length>1){
          res.unshift({id:0,name:"全部"});
        }
        this.sec_list=res;
        this.formInline.two_type=res[0].id;
        if(!this.list){
          this.searchClick();
        }    
      })
    },
    typeChange(val){
      this.getSecType(val);
    },
    selectStoreChanged(obj, item) {
      this.formInline.store_id = obj.store_id;
    },
    spanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
          //第一列的合并方法
          const _row_1 = row.rowspan;
          const _col_1 = _row_1 > 0 ? 1 : 0; //如果被合并了_row=0则它这个列需要取消
          return {
            rowspan: _row_1,
            colspan: _col_1
          }
      }
    },
    // 搜索
    searchClick() {
      if(!this.formInline.store_id){
        this.$message.error("请选择门店");
        return;
      }
      if(!this.pickerDate){
        this.$message.error("请选择月份");
        return;
      }
      this.formInline.start_time = this.pickerDate;
      this.fetchData();
    },
    // 列表获取
    fetchData() {
      this.listLoading = true;
      this.getTopList();
      // if(this.old_id!=this.formInline.store_id||this.old_time!=this.formInline.start_time){
      //   this.getTopList();
      // }else{
      //   this.getList();
      // }
    },
    getTopList(){
      this.old_id=this.formInline.store_id;
      this.old_time=this.formInline.start_time;
      getAllInfo({store_id:this.formInline.store_id,start_time:this.formInline.start_time}).then(res=>{
        if(res.code==1){
          let money=0,all_money=0;
          res.data.forEach(val=>{
            money+=val.booking_money/1;
            all_money+=val.cumulative_money/1;
          })
          this.total_money=(money/1000000).toFixed(2);
          this.all_total_money=(all_money/1000000).toFixed(2);
          res.data.forEach(val=>{
            switch (val.one_type/1) {
              case 693:
                this.getTopData(val,"a1");
                break;
              case 694:
                this.getTopData(val,"a2");
                break;
              case 695:
                this.getTopData(val,"a3");
                break;
              case 696:
                this.getTopData(val,"a4");
                break;
              case 697:
                this.getTopData(val,"a5");
                break;
              case 698:
                this.getTopData(val,"a6");
                break;
              default:
                break;
            }
          })
          this.getList();
        }
      })
    },
    getList(){
      getTypeInfo(this.formInline).then(res=>{
        if(res.code==1){
          let list=[];
          let all_booking_money=0,all_cumulative_money=0;
          res.data.forEach(val=>{
            val.list.forEach((item,i)=>{
              let obj={
                name:val.name,
                section:item.section,
                money:(item.booking_money/1000000).toFixed(2),
                all_money:(item.cumulative_money/1000000).toFixed(2),
                rowspan:i==0?val.list.length:0
              };
              all_booking_money+=item.booking_money/1;
              all_cumulative_money+=item.cumulative_money/1;
              obj.ratio=this.total_money/1<=0?"0.00%":Math.abs((obj.money/this.total_money)*100).toFixed(2)+"%",
              list.push(obj);
            })
          })
          this.list=list;
          let money=0,num=0,all_money=0,all_num=0;
          this.list.forEach(val=>{
            money+=val.money/1;
            num+=val.num/1;
            all_money+=val.all_money/1;
            all_num+=val.all_num/1;
          })
          this.total_list[0].money=money.toFixed(2);
          this.total_list[0].all_money=all_money.toFixed(2);
          this.total_list[0].ratio=this.total_money/1<=0?"0.00%":Math.abs((money/this.total_money)*100).toFixed(2)+"%";
          this.listLoading=false;          
        }
      }).catch(res=>{
        this.listLoading=false;
      })
    },
    getTopData(data,type){
      this.top_list[1][type]=(data.booking_money/1000000).toFixed(2);
      this.top_list[2][type]=(data.cumulative_money/1000000).toFixed(2);
      if(this.total_money/1>0){
        this.top_list[0][type]=Math.abs((this.top_list[1][type]/this.total_money)*100).toFixed(2)+"%";
      }else{
        this.top_list[0][type]="0.00%";
      }
    },
  }
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .top_total{
    text-align: center;
    margin-bottom: 10px;
    div{
      display: inline;
      color: #666;
      font-size: 18px;
      span{
        color: #111;
      }
    }
    div+div{
      margin-left: 50px;
    }
  }
</style>